<script setup>
import { ref } from 'vue'
import Divider from '../components/Divider/Divider.vue'

const handleDividerClick = () => {
  alert('分割线被点击了！')
}
</script>

<template>
  <div class="divider-demo">
    <h1>分割线组件示例</h1>

    <div class="demo-section">
      <h2>基本水平分割线</h2>
      <Divider />
    </div>

    <div class="demo-section">
      <h2>自定义颜色的垂直分割线</h2>
      <div class="vertical-demo">
        <span>文本</span>
        <Divider
            orientation="vertical"
            color="#ff4757"
            thickness="2px"
            length="50px"
        />
        <span>文本</span>
      </div>
    </div>

    <div class="demo-section">
      <h2>带文本的分割线</h2>
      <Divider
          content="OR"
          content-position="center"
          color="#2ed573"
          thickness="2px"
          padding="0 1em"
      />
    </div>

    <div class="demo-section">
      <h2>自定义样式的分割线</h2>
      <Divider
          content="Continue"
          content-position="right"
          :style="{
            margin: '20px 0',
            borderTop: '3px dashed #ffa502'
          }"
          custom-class="custom-divider"
      />
    </div>

    <div class="demo-section">
      <h2>可点击的垂直分割线</h2>
      <div class="vertical-demo">
        <span>左侧</span>
        <Divider
            orientation="vertical"
            @click="handleDividerClick"
            thickness="4px"
            color="#3742fa"
        />
        <span>右侧</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.divider-demo {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  font-size: 24px;
  color: #2c3e50;
  margin-bottom: 30px;
  text-align: center;
}

.demo-section {
  margin-bottom: 40px;
  padding: 20px;
  border-radius: 8px;
  background-color: #f8f9fa;
}

h2 {
  font-size: 18px;
  color: #34495e;
  margin-bottom: 16px;
}

.vertical-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
}

.vertical-demo span {
  margin: 0 20px;
}
</style>